<template>
	<a-spin :spinning="!show">
		<div class="new-page" :style="`min-height: ${pageMinHeight}px`">
			<!-- S-查找条件 -->
			<a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
				<a-row type="flex" :gutter="4">
					<a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
						<a-form-item label="状态">
							<a-select v-model="form.status" placeholder="选择状态">
								<a-select-option :value="item.value" v-for="(item, index) in statusList" :key="index">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
						<a-form-item label="日期">
							<a-range-picker v-model="form.date" />
						</a-form-item>
					</a-col>
					<a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
						<a-form-item label="计划名称">
							<a-input v-model="form.taskName" placeholder="填写计划名称"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="6" :xs="24" :sm="6" :md="12" :lg="6" style="margin-top:6px;">
						<a-button type="primary" @click="fetchList()">查询</a-button>
						<a-button style="margin-left: 10px" @click="init()">重置</a-button>
						<a-button style="margin-left: 10px" @click="editOpen()">添加</a-button>
					</a-col>
				</a-row>
			</a-form>
			<!-- E-查找条件 -->
			<a-table :dataSource="data" :pagination="{ total }" @change="tableChange" :scroll="{ x: 1862}">
				<!-- S-id -->
				<a-table-column key="id" data-index="id" title="id" width="100px"></a-table-column>
				<!-- E-id -->
				<!-- S-计划名称 -->
				<a-table-column key="taskName" data-index="taskName" title="计划名称" width="140px" :ellipsis="true">
				</a-table-column>
				<!-- E-计划名称 -->
				<!-- S-发起人 -->
				<a-table-column key="createUser" data-index="createUser" title="发起人" width="100px"></a-table-column>
				<!-- E-发起人 -->
				<!-- S-检查类型 -->
				<a-table-column key="checkType" title="检查类型" width="100px">
					<template slot-scope="record">
						{{checkTypeList.find(x=>x.value === record.checkType)?.name || '无'}}
					</template>
				</a-table-column>
				<!-- E-检查类型 -->
				<!-- S-检查类型 -->
				<a-table-column key="checkWay" title="检查方式" width="120px">
					<template slot-scope="record">
						{{checkWayList.find(x=>x.value === record.checkWay)?.name || '无'}}
					</template>
				</a-table-column>
				<!-- E-检查类型 -->
				<!-- S-发布日期 -->
				<a-table-column key="createDate" data-index="createDate" title="发布日期" width="120px" :ellipsis="true">
				</a-table-column>
				<!-- E-发布日期 -->
				<!-- S-开始时间 -->
				<a-table-column key="startTime" data-index="startTime" title="开始时间" width="120px" :ellipsis="true">
				</a-table-column>
				<!-- E-开始时间 -->
				<!-- S-结束时间 -->
				<a-table-column key="endTime" data-index="endTime" title="结束时间" width="120px" :ellipsis="true">
				</a-table-column>
				<!-- E-结束时间 -->
				<!-- S-附件 -->
				<a-table-column key="fileUrl" data-index="fileUrl" title="附件" width="140px" :ellipsis="true">
				</a-table-column>
				<!-- E-附件 -->
				<!-- S-更新日期 -->
				<a-table-column key="gmtModify" data-index="gmtModify" title="更新日期" width="120px" :ellipsis="true">
				</a-table-column>
				<!-- E-更新日期 -->
				<!-- S-备注 -->
				<a-table-column key="remark" data-index="remark" title="备注" width="150px" :ellipsis="true">
				</a-table-column>
				<!-- E-备注 -->
				<!-- S-状态 -->
				<a-table-column key="status" title="状态" :ellipsis="true" width="100px">
					<template slot-scope="record">
						{{statusList.find(x=>x.value === record.status)?.name || '无'}}
					</template>
				</a-table-column>
				<!-- E-状态 -->
				<!-- S-操作 -->
				<a-table-column title="操作" fixed="right" width="432px">
					<template slot-scope="record">
						<a-space>
							<a-button type="primary" ghost @click="editOpen(record)">编辑</a-button>
							<a-button danger @click="deleteTap(999)">删除</a-button>
							<a-button danger @click="drawerOpen(record)">详情</a-button>
							<a-button danger @click="taskModal(record,1)">开启计划</a-button>
							<a-button danger @click="taskModal(record,0)">关闭计划</a-button>
						</a-space>
					</template>
				</a-table-column>
				<!-- E-操作 -->
			</a-table>
			<!-- S-编辑弹框 -->
			<edit-model ref="editRef" @ok="fetchList" :checkWayList="checkWayList" :checkTypeList="checkTypeList"
				:tableAllList="tableAllList" :orgList="orgList" :userAllList="userAllList" />
			<!-- E-编辑弹框 -->
		</div>
	</a-spin>
</template>

<script>
	import { mapState } from 'vuex'
	import { message } from 'ant-design-vue';
	import { postPlanLists, postPlanDelete, getPlanOpen, getPlanDetail } from "@/services"
	import { postTableAllList } from "@/services"
	import { getOrgList } from "@/services"
	import { getUserAllList } from "@/services"
	const dayjs = require('dayjs')
	import editModel from "./components/edit"
	export default {
		name: 'Plan',
		components: {
			editModel
		},
		data() {
			return {
				form: {
					status: undefined,
					end: '',
					taskName: '',
					date: [],
					page: 1,
					limit: 10,
				},
				// 数量
				total: 0,
				data: [],
				// 状态列表
				statusList: [
					{ name: '未开始', value: 0 },
					{ name: '进行中', value: 1 },
					{ name: '已结案', value: 2 },
				],
				// 检查方式列表
				checkWayList: [
					{ name: '表格', value: 0 },
					{ name: '直接输入', value: 1 },
				],
				// 检查类型列表
				checkTypeList: [
					{ name: '一般检查', value: 1 },
				],
				// 全部表格列表
				tableAllList: [],
				// 组织列表
				orgList:[],
				// 全部用户
				userAllList:[],
				// 页面状态
				show: false,
			}
		},
		computed: {
			...mapState('setting', ['pageMinHeight']),
		},
		created() {
			//页面初始化
			this.fetchList();
			// 全部表格列表
			this.fetchTableAllList()
			// 获取组织列表
			this.fetchOrgList()
			// 全部用户
			this.fetchUserAllList()
		},
		methods: {
			/**
			* 打开抽屉
			*/
			async drawerOpen(e) {
				let data = await this.fetchDetail(e?.id)
				this.$refs.drawerRef.open({ ...data })
			},
			/**
			 * 打开弹框
			 */
			async editOpen(e) {
				let data = e && await this.fetchDetail(e?.id)
				this.$refs.editRef.open({ ...data })
			},

			//页面初始化
			init() {
				this.form = this.$options.data().form
				//获取列表
				this.fetchList();
			},

			//添加计划
			add() {
				let self = this;
				//打开编辑弹窗
				self.$refs.addRef.open();
				return false;
			},

			//添加计划成功通知
			addSuccess() {
				// let self = this;
				return false;
			},
			/**
			*数据
			*/
			async fetchList() {
				let { form } = this
				this.show = false
				let { data, code } = await postPlanLists({
					start: form.date[0] ? dayjs(form.date[0]).format('YYYY-MM-DD hh:mm:ss') : '',
					end: form.date[1] ? dayjs(form.date[1]).format('YYYY-MM-DD hh:mm:ss') : '',
					limit: form.limit,
					page: form.page,
					status: form.status,
					taskName: form.taskName,
				})
				this.show = true
				if (code == 200) {
					this.data = data?.records
					this.total = data?.total
				}
			},
			/**
			* 监听分页
			*/
			tableChange(e) {
				this.form.page = e.current
				this.form.limit = e.pageSize
				// 获取数据
				this.fetchList()
			},
			/**
			 * 删除 
			 */
			deleteTap(id) {
				let t = this
				this.$confirm({
					title: '提示',
					content: '你确定要删除吗?',
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					async onOk() {
						t.show = false
						let res = await postPlanDelete(`?taskId=${id}`)
						t.show = true
						if (res.code == 0) {
							message.success('删除成功')
							t.fetchList()
						} else {
							message.error(res.msg)

						}
					},
				});
			},
			/**
			*开启/关闭计划
			*/
			taskModal(record, status) {
				let t = this
				this.$confirm({
					title: '提示',
					content: status == 0 ? '你确定要关闭计划吗?' : '你确定要开启计划吗?',
					okText: '确定',
					cancelText: '取消',
					async onOk() {
						t.show = false
						let res = await getPlanOpen({
							status: status,
							taskId: record.id,
						})
						t.show = true
						if (res.code == 0) {
							message.success('更改成功')
							t.fetchList()
						} else {
							message.error(res.msg)

						}
					},
				});
			},
			/**
			*获取详情
			*/
			async fetchDetail(id) {
				let { code, data, msg } = await getPlanDetail({
					taskId: id,
				})
				if (code == 200) {
					return data
				} else {
					message.error(msg)
				}
			},
			/**
			* 全部表格列表
			*/
			async fetchTableAllList() {
				let { code, data } = await postTableAllList({
					limit: 0,
					orgId: 0,
					page: 0,
				})
				if (code == 200) {
					this.tableAllList = data
				}
			},
			/**
			 * 获取组织列表 
			 */
			async fetchOrgList() {
				let { code, data } = await getOrgList({})
				if (code == 200) {
					this.orgList = data
				}
			},
			/**
			 * 获取所有用户列表
			 */
				async fetchUserAllList() {
				this.show = false
				let { code, data } = await getUserAllList({})
				this.show = true
				if (code == 200) {
				this.userAllList = data
				}
			},

		}
	}
</script>

<style scoped lang="less">

</style>